<div class="columns">
  <div class="column">
    <PageHeader as |p|>
      <p.top>
        <KeyValueHeader @baseKey={{model}} @path="vault.cluster.secrets.backend.list" @mode={{mode}} @root={{backendCrumb}} @showCurrent={{true}} />
      </p.top>
      <p.levelLeft>
        <h1 class="title is-3">
          <SecretLink @class="is-inline has-text-info" @secret={{model.id}} @mode="show" @replace={{true}} @queryParams={{query-params tab='actions'}} @data-test-transit-link="actions">
            <Icon @glyph="arrow-left" />
          </SecretLink>
          Key Actions
        </h1>
      </p.levelLeft>
    </PageHeader>

    <div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
      <nav class="tabs">
        <ul>
          {{#each model.supportedActions as |supportedAction|}}
            <li class="{{if (eq supportedAction.name selectedAction) 'is-active'}}">
              <SecretLink @mode="actions" @secret={{model.id}} @queryParams={{query-params action=supportedAction.name}} @data-test-transit-action-link={{supportedAction.name}}>
                {{#if (eq supportedAction.name 'export')}}
                  Export Key
                {{else if (eq supportedAction.name 'hmac')}}
                  HMAC
                {{else}}
                  {{humanize supportedAction.name}}
                {{/if}}
              </SecretLink>
            </li>
          {{/each}}
        </ul>
      </nav>
    </div>

    <TransitKeyActions
      @selectedAction={{selectedAction}}
      @backend={{backend}}
      @key={{model}}
      @capabilities={{capabilities}}
      @onRefresh={{action "refresh"}}
    />
  </div>
</div>
